<template>
  <div>
  <Head></Head>
   <div class="Md_Content markdown-body">
      <p v-html="markdown" v-highlight class="MdBox"></p>
      <div class="lable_content">
        <div class="goIndex iconfont icon-fanhui" @click="goIndex"></div>
        <div class="lable_rigth">
          <span class="iconfont icon-biaoqian"></span>
          <span class="lable">{{articleInfo.lable}}</span></div>
      </div>
   </div>
  <Footer></Footer> 
  </div> 
</template>
<script>
import Head from '../home/components/head.vue'
import Footer from '../home/components/Footer.vue'
import Mk from 'markdown-it'
import 'github-markdown-css'
import 'highlight.js/styles/googlecode.css'
import { CardInfo } from '../../../api/api.js'
export default {
  data () {
    return {
      txt: '',
      articleInfo: {
        time: '',
        uid: '',
        lable: ''
      }
    }
  },

  mounted () {
    CardInfo(this.$route.query._id).then(res => {
      const _this = this;
      _this.txt = res.result.data[0].content;
      _this.articleInfo.time = res.result.data[0].time
      _this.articleInfo.uid = res.result.data[0].uid
      _this.articleInfo.lable = res.result.data[0].lable
      var md = new Mk()
      md.render(_this.txt)
    })
  },
  computed: {
    markdown () {
      var md = new Mk()
      var res = md.render(this.txt)
      return res
    }
  },
  methods: {
    //  getCardInfo 空
    async getCardInfo () {
      // const _this = this;
      // var md = new Mk()
      // md.render(_this.txt)
      /*
      大坑 ： 
      query 传参和 params 传参的区别
用法上的： query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候，已经是$route 而不是$router 了哦！！
展示上的： query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示所以两者不能同时使用！！
       */


      // await cloudApp.getTempFileURL({
      //   fileList: [
      //     {
      //       fileID: 'cloud://hello-cloudbase-2ghc11n5bfc69688.6865-hello-cloudbase-2ghc11n5bfc69688-1305892276/H2.md',
      //       maxAge: 6000 // 文件B的链接有效期，单位`ms`
      //     }
      //   ]
      // }).then(res1 => {
      //   console.log(res1);
      //   console.log(res1.fileList[0].download_url);
      //   this.$axios.get(res1.fileList[0].download_url).then(res2 => {
      //     console.log(res2.data);
      //     this.txt = res2.data
      //   })
      // });
      // let _this = this;
      // await _this.$axios.get('./JDBC.md').then(res => {
      //   console.log(res.data);
      //   this.txt = res.data
      // })
    },
    goIndex () {
      this.$router.push({ name: 'home' })
    }
  },
  created () {
    // this.getCardInfo();
  },
  components: {
    Head,
    Footer
  }
}
</script>
<style lang="less">
.Md_Content {
  width: 70%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 100px;
  background-color: #fff;
  border-radius: 10px;
  padding: 50px;
  .lable_content {
    display: flex;
    justify-content: flex-end;
    .goIndex {
      border-radius: 50%;
      background-color: #bcbc;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .lable_rigth {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 50%;
      .lable {
        padding: 5px;
        background-color: rgba(187, 204, 187, 0.6);
        border-radius: 30px;
        font-size: 12px;
        color: rgb(65, 65, 65);
      }
      span {
      }
    }
  }
}
</style>
